<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf 基本标签的使用</title>
    <link type="text/css" rel="stylesheet" th:href="@{/css/common.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
</head>
<body>

    <h3>01、th:text</h3>
    <span th:text="${thText}"></span>
    <span th:text="${#lists.size(thEach)}"></span>
    <span th:text="${#dates.format(date, 'yyyy-MM-dd HH:mm:ss')}"></span>

    <h3>02、th:utext</h3>
    <span th:utext="${thUtext}"></span>

    <h3>03、th:each</h3>
    <span th:each="item : ${thEach}" th:text="${item}"></span>
    <span th:each="person, status : ${personList}">
        <br />
        <span th:text="${status.count}"></span>
        <span th:text="${person.id}"></span>
        <span th:text="${person.name}"></span>
        <span th:text="${person.age}"></span>
    </span>


    <h3>04、th:object</h3>
    <span th:object="${person}">
        <span th:text="*{id}"></span>
        <span th:text="*{name}"></span>
        <span th:text="*{age}"></span>
    </span>
    <br />
    <span>
        <span th:text="${person.id}"></span>
        <span th:text="${person.name}"></span>
        <span th:text="${person.age}"></span>
    </span>

    <h3>05、th:field</h3>
    <form action="#" th:object="${person}" method="post">
        <label>
            <input type="text" th:field="*{name}" placeholder="name" readonly />
        </label>
        <label>
            <input type="text" th:field="*{age}" placeholder="age" readonly />
        </label>
    </form>

    <h3>06、th:href</h3>
    <a th:href="@{/thymeleaf/basic-label(id=${person.id})}">th-href</a>
    <a th:href="@{/thymeleaf/basic-label/{id}(id=${person.id})}">th-href</a>

    <h3>07、th:if</h3>
    <span th:if="${person.id} > 7">person.id > 7</span>
    <span th:if="${person.age} <= 26">person.age <= 26</span>

    <span th:if="${person} != null">person != null</span>
    <span th:if="${person} == null">person == null</span>

    <br />
    <span th:if="${person.age lt 25}">less than 25</span>
    <span th:if="${person.age == 25}">be equal to 25</span>
    <span th:if="${person.age gt 25}">greater than 25</span>
    <br />
    <span th:if="${person.name eq 'Abc'}">String eq Abc</span>
    <span th:if="${person.name eq 'Loren'}">String eq Loren</span>
    <span th:if="${person.name eq 'Efg'}">String eq Efg</span>

    <h3>08、th:include</h3>
    <span th:include="~{/common/footer :: thFragment}"></span>

    <h3>09、th:replace</h3>
    <span th:replace="~{/common/footer :: thFragment}"></span>

    <h3>10、th:insert</h3>
    <span th:insert="~{/common/footer :: thFragment}"></span>

    <h3>11、test bootstrap</h3>
    <button id="bootBtn" class="btn btn-info">test bootstrap</button>

</body>
<script type="text/javascript" th:src="@{/jquery/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script>
    $(document).ready(function () {
        $("#bootBtn").on("click", function () {
            alert("the button click");
        });
    });
</script>
</html>